<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../plugins/echarts/echarts.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>统计分析<small>接口调用统计</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>统计分析</el-breadcrumb-item>
            <el-breadcrumb-item>接口调用统计</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
    <div class="block">
        <!--<span class="demonstration">日期</span>-->
        <el-button @click="query">查询</el-button>
        <el-date-picker
                v-model="value1"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
    </div>
    <div id="main" style="height:480px;"></div>
        </div>
    </div>
</div>
</body>


<script>
    var vue = new Vue({
        el:"#app",
        data:{
            value1:"",
        },

        mounted(){
            this.value1 = "";
            this.drawLine();
            this.timer = setInterval(this.drawLine, 5000);
        },
        methods:{
            query(){
                if (this.value1==null || this.value1 == ""){
                    location.reload();
                }else {
                clearInterval(this.timer);
                this.drawLine();
                }
            },
            drawLine(){
                var myChart = echarts.init(document.getElementById('main'));
                    axios.post("/report/getMethodReport.do?value1="+this.value1).then((res)=>{
                        if (res.data.data == null){
                            this.$message.error("无数据");
                            this.value1="";
                            this.drawLine();
                        }
                        myChart.setOption({
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value'
                            },
                            yAxis: {
                                type: 'category',
                                data: res.data.data.name
                            },
                            series: [
                                {
                                    name: '调用次数',
                                    type: 'bar',
                                    stack: '总量',
                                    label: {
                                        show: true,
                                        position: 'insideRight'
                                    },
                                    data: res.data.data.count
                                }
                            ]
                        })
                    })
                }
        }
    })



</script>



</html>